<!-- ====== Contact Section Start -->
<section class="bg-white py-16 lg:py-24 dark:bg-dark">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <!-- 标题区域 -->
    <div class="text-center mb-16">
      <div class="inline-block mb-6">
        <span class="px-4 py-2 text-sm font-semibold text-white bg-primary dark:bg-primary">
          联系我们
        </span>
      </div>
      <h2 class="mb-6 text-3xl font-bold text-black sm:text-4xl lg:text-5xl dark:text-white">
        随时为您<span class="text-primary dark:text-primary">提供帮助</span>
      </h2>
      <p class="max-w-2xl mx-auto text-lg text-body-color dark:text-gray-300">
        多种联系方式，专业团队7×24小时为您服务
      </p>
    </div>

    <!-- 二维码区域 -->
    <div class="mb-16">
      <div class="text-center mb-12">
        <h3 class="text-2xl font-bold text-black dark:text-white mb-4">扫码联系</h3>
        <div class="w-12 h-1 bg-primary mx-auto"></div>
      </div>
      
      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
        <!-- 微信 -->
        <div class="group bg-white border-2 border-gray-2 p-6 hover:border-primary hover:bg-gray-1 hover:shadow-lg transition-all duration-300 dark:bg-dark-2 dark:border-gray-600 dark:hover:border-primary dark:hover:bg-dark-3 dark:hover:shadow-xl">
          <div class="text-center">
            <div class="w-28 h-28 sm:w-32 sm:h-32 lg:w-36 lg:h-36 mx-auto mb-4 bg-gray-1 border-2 border-gray-3 rounded-lg overflow-hidden dark:bg-gray-700 dark:border-gray-500">
              <img src="/assets/team/weixin.png" alt="微信二维码" class="w-full h-full object-cover" />
            </div>
            <h4 class="font-bold text-black dark:text-white mb-1">客服微信</h4>
            <p class="text-sm text-body-color dark:text-gray-400">专属客服</p>
          </div>
        </div>

        <!-- 公众号 -->
        <div class="group bg-white border-2 border-gray-2 p-6 hover:border-primary hover:bg-gray-1 hover:shadow-lg transition-all duration-300 dark:bg-dark-2 dark:border-gray-600 dark:hover:border-primary dark:hover:bg-dark-3 dark:hover:shadow-xl">
          <div class="text-center">
            <div class="w-28 h-28 sm:w-32 sm:h-32 lg:w-36 lg:h-36 mx-auto mb-4 bg-gray-1 border-2 border-gray-3 rounded-lg overflow-hidden dark:bg-gray-700 dark:border-gray-500">
              <img src="/assets/team/mpweixin.jpg" alt="公众号" class="w-full h-full object-cover" />
            </div>
            <h4 class="font-bold text-black dark:text-white mb-1">微信公众号</h4>
            <p class="text-sm text-body-color dark:text-gray-400">最新资讯</p>
          </div>
        </div>

        <!-- 小程序 -->
        <div class="group bg-white border-2 border-gray-2 p-6 hover:border-primary hover:bg-gray-1 hover:shadow-lg transition-all duration-300 dark:bg-dark-2 dark:border-gray-600 dark:hover:border-primary dark:hover:bg-dark-3 dark:hover:shadow-xl">
          <div class="text-center">
            <div class="w-28 h-28 sm:w-32 sm:h-32 lg:w-36 lg:h-36 mx-auto mb-4 bg-gray-1 border-2 border-gray-3 rounded-lg overflow-hidden dark:bg-gray-700 dark:border-gray-500">
              <img src="/assets/team/xcx.png" alt="小程序" class="w-full h-full object-cover" />
            </div>
            <h4 class="font-bold text-black dark:text-white mb-1">微信小程序</h4>
            <p class="text-sm text-body-color dark:text-gray-400">便捷服务</p>
          </div>
        </div>

        <!-- APP -->
        <div class="group bg-white border-2 border-gray-2 p-6 hover:border-primary hover:bg-gray-1 hover:shadow-lg transition-all duration-300 dark:bg-dark-2 dark:border-gray-600 dark:hover:border-primary dark:hover:bg-dark-3 dark:hover:shadow-xl">
          <div class="text-center">
            <div class="w-28 h-28 sm:w-32 sm:h-32 lg:w-36 lg:h-36 mx-auto mb-4 bg-gray-1 border-2 border-gray-3 rounded-lg overflow-hidden dark:bg-gray-700 dark:border-gray-500">
              <img src="/assets/team/app.png" alt="APP下载" class="w-full h-full object-cover" />
            </div>
            <h4 class="font-bold text-black dark:text-white mb-1">APP下载</h4>
            <p class="text-sm text-body-color dark:text-gray-400">移动应用</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 其他联系方式 -->
    <div class="mb-16">
      <div class="text-center mb-12">
        <h3 class="text-2xl font-bold text-black dark:text-white mb-4">更多联系方式</h3>
        <div class="w-12 h-1 bg-primary dark:bg-primary mx-auto"></div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- 提交工单 -->
        <div class="group bg-gray-50 border border-gray-200 rounded-lg p-6 hover:bg-primary hover:border-primary hover:text-white hover:shadow-xl transition-all duration-300 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-primary dark:hover:border-primary dark:hover:text-white dark:hover:shadow-2xl">
          <div class="flex items-start">
            <div class="flex-shrink-0 w-12 h-12 bg-primary text-white rounded-lg flex items-center justify-center mr-4 group-hover:bg-white group-hover:text-primary transition-colors duration-300 dark:bg-gray-700 dark:text-white dark:group-hover:bg-white dark:group-hover:text-primary">
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
              </svg>
            </div>
            <div class="flex-1">
              <h4 class="text-xl font-bold mb-2 text-gray-900 dark:text-white group-hover:text-white">提交工单</h4>
              <p class="mb-4 text-gray-600 dark:text-gray-300 group-hover:text-white group-hover:opacity-90">通过工单系统提交问题，24小时内专业回复</p>
              <a href="#" class="inline-flex items-center font-semibold text-primary hover:text-primary-dark group-hover:text-white dark:text-primary dark:hover:text-primary-light dark:group-hover:text-white transition-colors duration-300">
                立即提交
                <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>

        <!-- 电子邮件 -->
        <div class="group bg-gray-50 border border-gray-200 rounded-lg p-6 hover:bg-primary hover:border-primary hover:text-white hover:shadow-xl transition-all duration-300 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-primary dark:hover:border-primary dark:hover:text-white dark:hover:shadow-2xl">
          <div class="flex items-start">
            <div class="flex-shrink-0 w-12 h-12 bg-primary text-white rounded-lg flex items-center justify-center mr-4 group-hover:bg-white group-hover:text-primary transition-colors duration-300 dark:bg-gray-700 dark:text-white dark:group-hover:bg-white dark:group-hover:text-primary">
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
              </svg>
            </div>
            <div class="flex-1">
              <h4 class="text-xl font-bold mb-2 text-gray-900 dark:text-white group-hover:text-white">电子邮件</h4>
              <p class="mb-4 text-gray-600 dark:text-gray-300 group-hover:text-white group-hover:opacity-90">发送邮件至客服邮箱，我们将尽快回复</p>
              <a href="mailto:support@example.com" class="inline-flex items-center font-semibold text-primary hover:text-primary-dark group-hover:text-white dark:text-primary dark:hover:text-primary-light dark:group-hover:text-white transition-colors duration-300">
                发送邮件
                <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>

        <!-- 在线客服 -->
        <div class="group bg-gray-50 border border-gray-200 rounded-lg p-6 hover:bg-primary hover:border-primary hover:text-white hover:shadow-xl transition-all duration-300 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-primary dark:hover:border-primary dark:hover:text-white dark:hover:shadow-2xl">
          <div class="flex items-start">
            <div class="flex-shrink-0 w-12 h-12 bg-primary text-white rounded-lg flex items-center justify-center mr-4 group-hover:bg-white group-hover:text-primary transition-colors duration-300 dark:bg-gray-700 dark:text-white dark:group-hover:bg-white dark:group-hover:text-primary">
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
              </svg>
            </div>
            <div class="flex-1">
              <h4 class="text-xl font-bold mb-2 text-gray-900 dark:text-white group-hover:text-white">在线客服</h4>
              <p class="mb-4 text-gray-600 dark:text-gray-300 group-hover:text-white group-hover:opacity-90">实时在线聊天，专业客服即时响应</p>
              <a href="/online" class="inline-flex items-center font-semibold text-primary hover:text-primary-dark group-hover:text-white dark:text-primary dark:hover:text-primary-light dark:group-hover:text-white transition-colors duration-300">
                开始聊天
                <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>

        <!-- 电话咨询 -->
        <div class="group bg-gray-50 border border-gray-200 rounded-lg p-6 hover:bg-primary hover:border-primary hover:text-white hover:shadow-xl transition-all duration-300 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-primary dark:hover:border-primary dark:hover:text-white dark:hover:shadow-2xl">
          <div class="flex items-start">
            <div class="flex-shrink-0 w-12 h-12 bg-primary text-white rounded-lg flex items-center justify-center mr-4 group-hover:bg-white group-hover:text-primary transition-colors duration-300 dark:bg-gray-700 dark:text-white dark:group-hover:bg-white dark:group-hover:text-primary">
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
              </svg>
            </div>
            <div class="flex-1">
              <h4 class="text-xl font-bold mb-2 text-gray-900 dark:text-white group-hover:text-white">电话咨询</h4>
              <p class="mb-4 text-gray-600 dark:text-gray-300 group-hover:text-white group-hover:opacity-90">专业顾问电话服务，解答各类问题</p>
              <a href="tel:400-000-9978" class="inline-flex items-center font-semibold text-primary hover:text-primary-dark group-hover:text-white dark:text-primary dark:hover:text-primary-light dark:group-hover:text-white transition-colors duration-300">
                400-000-9978
                <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部服务信息 -->
    <div class="text-center">
      <div class="inline-flex items-center justify-center space-x-6 p-4 bg-gray-1 border-l-4 border-primary rounded-r-lg dark:bg-dark-2 dark:border-primary">
        <div class="flex items-center space-x-2">
          <div class="w-3 h-3 bg-primary rounded-full"></div>
          <span class="text-sm font-medium text-body-color dark:text-gray-300">7×24小时服务</span>
        </div>
        <div class="flex items-center space-x-2">
          <div class="w-3 h-3 bg-blue-dark rounded-full"></div>
          <span class="text-sm font-medium text-body-color dark:text-gray-300">专业团队</span>
        </div>
        <div class="flex items-center space-x-2">
          <div class="w-3 h-3 bg-primary rounded-full"></div>
          <span class="text-sm font-medium text-body-color dark:text-gray-300">快速响应</span>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- ====== Contact Section End -->
